import React, { Component } from 'react';
import { connect } from 'dva';
import { Dispatch, AnyAction } from 'redux';
import { Statistics } from '@/models/connect';
import _ from 'lodash';
import styles from './info.css';
import DeviceStatistics from './deviceComponents/deviceStatistics';
import DeviceDetail from './deviceComponents/deviceDetail';

interface DeviceProps {
  deviceVisible?: Statistics;
  loading: boolean;
  dispatch: Dispatch<AnyAction>;
}

class Device extends Component<DeviceProps>{
  constructor(props: DeviceProps) {
    super(props);
    this.state = {
      list : [
        { name: '设备统计',id: 0 },
        { name: '设备明细',id: 1 },
      ],
      visible: 0
    }
  }
    handleStatus = (id) => {
      const { dispatch } = this.props;
      dispatch({ type: 'statistics/deviceVisible',payload:{visible:id,visibleStatus: ''} });
      console.log(id);
      if(id === 1){
        dispatch({ type: 'statistics/deviceDetailReturn', payload:'no' });
      }else {
        dispatch({ type: 'statistics/deviceDetailReturn', payload:'true' });
      }
    }
    render() {
        const { deviceVisible = [] } = this.props;
        console.log(deviceVisible);
        return(
            <div className={styles['inforStatic-container']}>
              <div className={styles['inforStatic-left']}>
                <div className={styles['inforStatic-left-bg']} />
                <div className={styles['inforStatic-left-textBox']} >
                  {
                    _.map(this.state.list, item => (
                      <div className={`${styles['content']} ${item.id === deviceVisible.visible ? styles['content-active']: null}`} key={item.id} onClick={() => { this.handleStatus(item.id);}}>{item.name}</div>
                    ))
                  }
                </div>
              </div>
              <div className={styles['inforStatic-container-right']}>
              { (() => {
                  switch (deviceVisible.visible) {
                    case 0:
                      return <DeviceStatistics />;
                    case 1:
                      return <DeviceDetail />;
                  }
                })()
              }
              </div>
            </div>
        );
    }
}
export default  connect(({ statistics }:any) => ({
  deviceVisible: statistics.deviceVisible,
}))(Device);
